<template>
    <div class="app">
      <header class="app-header">
        <h1>灵璧县人工智能产业园环境保护监测</h1>
        <nav class="app-nav">
          <a href="#" :class="{ active: $route.path === '/monitor' }" @click.prevent="navigateTo('/monitor')">环境监测仪表盘</a>
          <a href="#" :class="{ active: $route.path === '/pollution-source' }" @click.prevent="navigateTo('/pollution-source')">环境污染源监测</a>
          <a href="#" :class="{ active: $route.path === '/pollution-tracing' }" @click.prevent="navigateTo('/pollution-tracing')">融合溯源</a>
          <a href="#" :class="{ active: $route.path === '/environment-evaluation' }" @click.prevent="navigateTo('/environment-evaluation')">环境预警评价</a>
          <a href="#" :class="{ active: $route.path === '/enterprise-profile' }" @click.prevent="navigateTo('/enterprise-profile')">企业环保画像</a>
        </nav>
      </header>
      
      <main class="app-content">
        <router-view />
      </main>
    </div>
  </template>
  
  <script setup lang="ts">
  import { useRouter } from 'vue-router'
  import { onMounted } from 'vue'
  
  const router = useRouter()
  
  const navigateTo = (path: string) => {
    console.log('Navigating to:', path)
    // 使用 window.location.href 强制刷新页面
    window.location.href = path
  }
  </script>
  
  <style scoped>
  .app {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #0a2744 0%, #001529 100%);
  }
  
  .app-header {
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
  }
  
  .app-nav {
    display: flex;
    gap: 20px;
  }
  
  .app-nav a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 4px;
  }
  
  .app-nav a:hover {
    background: rgba(0,255,255,0.1);
  }
  
  .app-nav a.active {
    color: #0ff;
    background: rgba(0,255,255,0.2);
  }
  
  .app-content {
    flex: 1;
    overflow: auto;
  }
  </style>
  